<template>
	<view class="index u-flex-col u-col-center u-rela">
		<sdc-navbar 
			:isBack="false"
			title="我的"
			:borderBottom="false"
		>
			<view class="right-icon" slot="right">
				<u-icon 
					name="setting"
					size="48"
					@click="$Router.push({name: 'user.setting'})"
				></u-icon>
			</view>
		</sdc-navbar>
		<view class="userinfo u-flex-col u-col-center u-row-center">
			<view class="avatar" @click="toLogin" v-show="!isLogin">
				<u-avatar size="120"></u-avatar> 
			</view>
			<view class="avatar" v-show="isLogin">
				<u-avatar size="120" :src="userinfo.avatar"></u-avatar>
			</view>
			<view class="info u-flex-col u-col-center" v-show="!isLogin">
				<text class="title">点击头像登录</text>
				<text class="description">世界上还剩下一种能力的话，那就是坚持。</text>
			</view>
			<view class="info u-flex-col u-col-center" v-show="isLogin">
				<text class="title">{{userinfo.nickname}}</text>
				<text class="description">{{userinfo.bio||'还没有设置格言'}}</text>
			</view>
		</view>
		<view class="count u-flex u-col-center u-row-center u-abso">
			<view class="item u-flex-col u-col-center">
				<text>256</text>
				<text>我的关注</text>
			</view>
			<view class="item u-flex-col u-col-center">
				<text>123</text>
				<text>我的粉丝</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {mapState,mapGetters} from 'vuex'
	export default {
		data() {
			return {
				
			};
		},
		methods: {
			toLogin(){
				this.$Router.push({
					name: 'user.login'
				})
			}
		},
		computed: {
			...mapGetters(['isLogin']),
			...mapState(['userinfo'])
		}
	}
</script>

<style lang="scss" scoped>
	.index{
		.right-icon{
			padding: 0 $uni-spacing-row-sm;
		}
		.userinfo{
			width: 750upx;
			height: 368upx;
			background-color: $uni-color-primary;
			padding-bottom: 90upx;
			.info{
				.title{
					font-size: $uni-font-size-subtitle;
					font-weight: bold;
					padding-bottom: 14upx;
				}
			}
		}
		.count{
			z-index: 2;
			background-color: $uni-bg-color;
			width: 702upx;
			height: 180upx;
			border-radius: 12upx;
			bottom: -90upx;
			box-shadow: 0upx 6upx 10upx 0upx rgba(0, 0, 0, 0.06);
			.item{
				width: 275upx;
				text:first-child{
					font-size: 36upx;
					font-weight: bold;
				}
				text:last-child{
					font-size: 24upx;
					color: $uni-text-color-grey;
				}
			}
		}
	}
</style>
